<template>
  <div class="app-container">

    <el-button type="primary" @click="contraction"
      >{{ this.size === 1 ? "缩略图" : "原图" }}
    </el-button>
    <el-button type="primary" @click="addBox">新增 </el-button>
    <el-button type="primary" @click="saveBox">保存 </el-button>
    <div class="container">
      <div class="title">华寅停车场</div>
      <div
        v-for="(item, index) in list"
        :key="index"
        :class="{ boxActive: index === isActive, box: true }"
        :style="{
          top: item.y + 'px',
          left: item.x + 'px',
          background: '#' + item.cargoEnable,
        }"
        @mousedown.stop="moveBox($event, index)"
        @contextmenu.prevent.stop="rightClick($event, index)"
        @clickoutside="isActive2 = false"
      >
        <div>
          <p :style="{ color: item.providerItemColor }">
            {{ item.providerItem }}
          </p>
          <p :style="{ color: item.cargoQuantityColor }">
            {{ item.cargoQuantity }}
          </p>
        </div>

        <div
          :class="{ right: index === isActive }"
          @mousedown.stop="dragLeft($event, index)"
        ></div>
        <div
          :class="{ bottom: index === isActive }"
          @mousedown.stop="moveBottom($event, index)"
        ></div>

        <div class="action" v-if="index === isActive2">
          <div @click.stop="showDlg(item)">
            <i class="el-icon-setting"></i>设置
          </div>
          <div @click.stop="removeBox(index)">
            <i class="el-icon-delete"></i>删除
          </div>
          <div @click="saveBox"><i class="el-icon-check"></i>保存</div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      title="属性设置"
      @close="closeDlg"
    >
      <el-form label-width="68px" :model="form" :rules="rules" ref="form">
        <el-form-item label="x" prop="x">
          <el-input v-model="form.x" type="number"></el-input>
        </el-form-item>
        <el-form-item label="y" prop="y">
          <el-input v-model="form.y" type="number"></el-input>
        </el-form-item>
        <el-form-item label="颜色" prop="bgColor">
          <el-radio-group v-model="form.bgColor">
            <el-radio label="99ff66">
              <span
                style="
                  width: 10px;
                  height: 10px;
                  display: inline-block;
                  background-color: #99ff66;
                "
              ></span>
            </el-radio>
            <el-radio label="ffff00">
              <span
                style="
                  width: 10px;
                  height: 10px;
                  display: inline-block;
                  background-color: #ffff00;
                "
              ></span>
            </el-radio>
            <el-radio label="c5e0b4">
              <span
                style="
                  width: 10px;
                  height: 10px;
                  display: inline-block;
                  background-color: #c5e0b4;
                "
              ></span>
            </el-radio>
            <el-radio label="ff7c80">
              <span
                style="
                  width: 10px;
                  height: 10px;
                  display: inline-block;
                  background-color: #ff7c80;
                "
              ></span>
            </el-radio>
            <el-radio label="b4c7e7">
              <span
                style="
                  width: 10px;
                  height: 10px;
                  display: inline-block;
                  background-color: #b4c7e7;
                "
              ></span>
            </el-radio>
            <el-radio label="ff0000">
              <span
                style="
                  width: 10px;
                  height: 10px;
                  display: inline-block;
                  background-color: #ff0000;
                "
              ></span>
            </el-radio>
            <el-radio label="00a7d0">
              <span
                style="
                  width: 10px;
                  height: 10px;
                  display: inline-block;
                  background-color: #00a7d0;
                "
              ></span>
            </el-radio>
            <el-radio label="008000">
              <span
                style="
                  width: 10px;
                  height: 10px;
                  display: inline-block;
                  background-color: #008000;
                "
              ></span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <ry-table
        ref="ryTable"
        :queryParam="queryParam"
        :columnsData="columnsData"
        :isPage="true"
        :urlList="urlList"
        :isInit="false"
        :height="400"
      >
      </ry-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="sure"
          v-hasPermi="['stock:coordinate:add']"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>

import { locationList, saveSet } from '@/api/entranceGuard/carEntryReservation.js'
export default {
  data () {
    return {
      dialogVisible: false,
      loading: false,
      isActive: false,
      isActive2: false,
      form: {
        x: 0,
        y: 0,
        bgColor: ''
      },
      list: [],
      rules: {
        x: [
          { required: true, message: '请输入坐标x', trigger: 'blur' },
        ],
        y: [
          { required: true, message: '请输入坐标y', trigger: 'blur' },
        ],
        bgColor: [
          { required: true, message: '请输入背景颜色', trigger: 'change' },
        ],
      },
      // 接口数据
      urlList: {
        searchUrl: '/stock/materialInv/queryDetails'
      },
      // 查询条件
      queryParam: {
        providerItem: ''
      },
      // 表格列配置
      columnsData: [
        { prop: 'cargoQuantity', label: '数量', },
        { prop: 'poItemNum', label: 'po号', },
        { prop: 'creationDate', label: '入库时间', },
        { prop: 'providerItem', label: '供应商item', },
      ],
      size: 1,
      timer: null,
      num: 0
    }
  },
  created () {
    document.addEventListener('click', this.clickOutside)
  },
  beforeDestroy () {
    document.removeEventListener('click', this.clickOutside)

  },
  mounted () {
    this.getList()
    this.move()


  },

  methods: {
    removeBox (index) {
      this.isActive2 = false
      this.list.splice(index, 1)
    },
    clickOutside (e) {
      if (this.isActive2 && this.$el.contains(e.target)) {
        this.isActive2 = false
      }
    },
    rightClick (e, index) {
      this.isActive2 = index
      this.$nextTick(() => {
        let action = document.querySelector('.action')
        action.style.left = e.offsetX + 10 + 'px'
        action.style.top = e.offsetY + 10 + 'px'
      })
    },
    setSize (size) {
      this.size = size
      document.body.style.zoom = size;
      document.body.style.cssText += '; -moz-transform: scale(' + size + ');-moz-transform-origin: 0 0; ';
    },


    contraction () {
      if (this.size === 1) {
        this.setSize(0.35)
      } else {
        this.setSize(1)
      }
    },

    move () {
      let scrollContainer = document.querySelector(".app-container")
      let dragContainer = document.querySelector(".container");
      dragContainer.onmousedown = e => {

        //鼠标按下那一刻，滚动条的位置
        let mouseDownScrollPosition = {
          scrollLeft: scrollContainer.scrollLeft,
          scrollTop: scrollContainer.scrollTop
        };
        //鼠标按下的位置坐标
        let mouseDownPoint = {
          x: e.clientX,
          y: e.clientY
        };
        dragContainer.onmousemove = e => {

          //鼠标滑动的实时距离
          let dragMoveDiff = {
            x: mouseDownPoint.x - e.clientX,
            y: mouseDownPoint.y - e.clientY
          };
          scrollContainer.scrollLeft = mouseDownScrollPosition.scrollLeft + dragMoveDiff.x;
          scrollContainer.scrollTop = mouseDownScrollPosition.scrollTop + dragMoveDiff.y;
        };
        document.onmouseup = e => {

          dragContainer.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },

    moveBox (event, index) {
      this.isActive = index
      this.$nextTick(() => {
        let el = document.querySelector('.boxActive')
        let startX = event.clientX,
          startY = event.clientY,
          left = el.offsetLeft,
          top = el.offsetTop
        let moveFun = (event) => {
          clearTimeout(this.timer)
          let X = event.clientX - startX
          let Y = event.clientY - startY
          el.style.left = `${left + X}px`
          el.style.top = `${top + Y}px`
          this.timer = setTimeout(() => {
            this.list[index].x = Number(el.style.left.slice(0, el.style.left.length - 2))
            this.list[index].y = Number(el.style.top.slice(0, el.style.top.length - 2))
          }, 500)
        }
        document.addEventListener('mousemove', moveFun)
        el.addEventListener('mouseup', () => {
          document.removeEventListener('mousemove', moveFun)
        })
      })
    },

    dragLeft (e, index) {
      this.isActive = index

      this.$nextTick(() => {

        let left = document.querySelector('.boxActive')
        let middle = document.querySelector('.right')

        let disX = e.clientX
        middle.left = middle.offsetLeft

        document.onmousemove = function (ev) {
          let middleLeft = middle.left + (ev.clientX - disX)
          middle.style.left = left.style.width = middleLeft + 'px'
          return false
        }
        document.onmouseup = function () {
          document.onmousemove = null
          document.onmouseup = null
          middle.releaseCapture && middle.releaseCapture()
        }
        middle.setCapture && middle.setCapture()
        return false

      })


    },


    moveBottom (e, index) {
      this.isActive = index


      this.$nextTick(() => {


        let left = document.querySelector('.boxActive');
        let middle = document.querySelector('.bottom');

        let disY = e.clientY;
        middle.top = middle.offsetTop;
        document.onmousemove = function (e) {
          let middleTop = middle.top + (e.clientY - disY);
          middle.style.top = left.style.height = middleTop + 'px';
          return false;
        };
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
          middle.releaseCapture && middle.releaseCapture();
        };
        middle.setCapture && middle.setCapture();
        return false;
      })

    },

    addBox () {
      this.list.push(
        {
          areaLoc: 'E1西里',
          cargoEnable: 'ff7c80',
          cargoQuantity: '405.48可用',
          creationDate: 'E1西里',
          poItemNum: 'E1西里',
          providerItem: 'E1西里',
          x: 175,
          y: 45

        }
      )
    },

    saveBox () {
      this.$forceUpdate()
      console.log(this.list);
    },

    getList () {
      locationList().then(res => {
        this.list = res.rows
      })
    },

    showDlg (item) {
      console.log('item: ', item);
      this.form = { ...item, bgColor: item.cargoEnable }
      this.$nextTick(() => {
        this.queryParam.providerItem = item.providerItem
        this.$refs.ryTable.getTableData()

      })

      this.dialogVisible = true
    },

    sure () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          saveSet(this.form).then(res => {
            this.getList()
            this.$message.success('设置成功！')
            this.closeDlg()
          })
        } else {
          return false;
        }
      });

    },

    closeDlg () {
      this.$refs.form.clearValidate()
      this.dialogVisible = false
    },

  }
}

</script>
<style lang="scss" scoped>
.app-container {
  overflow: auto;
  // cursor: grab;

  // &:active {
  //   cursor: grabbing;
  //   user-select: none;
  // }
}
.title {
  position: absolute;
  font-size: 48px;
  top: 10%;
  left: 14%;
}
.container {
  background: url("../../../assets/images/stop_bg.png");
  width: 2600px;
  height: 2400px;
  background-size: 100% 100%;
  margin: 0 auto;
  position: relative;
}
.box {
  width: 95px;
  // height: 52px;
  font-size: 12px;
  padding: 2px 5px;
  box-sizing: border-box;
  position: absolute;
  user-select: none;
  // -webkit-transform: scale(0.72);
  // cursor: pointer;
  // background: #ddd;
  &:hover {
    box-shadow: 0px 0px 10px #999;
  }
  p {
    margin: 0;
  }
  .right {
    width: 20px;
    height: 20px;
    position: absolute;
    right: -20px;
    top: 0;
    background-color: red;
    opacity: 0;
    cursor: col-resize;
  }

  .bottom {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    bottom: -20px;
    background-color: green;
    opacity: 0;
    cursor: row-resize;
  }

  .action {
    position: absolute;
    width: 53px;
    height: 65px;
    background-color: #f8f8f9;
    box-shadow: 2px 2px 3px 0 rgb(0 0 0 / 30%);
    border-radius: 2px;
    line-height: 22px;
    color: #333;
    div {
      padding-left: 5px;
      cursor: pointer;
      &:hover {
        background-color: #eeeeee;
      }
      i {
        padding-right: 3px
      }
    }
  }
}

.el-dialog__wrapper {
  z-index: 99999 !important;
}
</style>
